<template name="shop">
	<view class="flex-column shops" v-show="!isNull(shops)">
		<view class="flex-row shop" v-for="(shop,index) in shops" :key="shop.goodsId" @click="shopDetail(index)">
			<u-image width="120px" height="120px" :src="shop.productCover" mode="widthFix" :lazy-load="true" class="img"></u-image>
			<view class="flex-column shop-info">
				<view class="shop-title">
					{{shop.title}}
				</view>
				<view class="flex-row sales-tip margin-five-ten" v-show="!isNull(shop.salesVolume)">
					热销{{shop.salesVolume}}件
				</view>
				<view class="coupon margin-five-ten">
					<u-tag :text="shop.discountCoupon +'元券'" v-show="shop.discountCoupon > 0" type="error" size="mini" />
				</view>
				<view class="flex-row final-price margin-five-ten">
					<view class="flex-row money-info">
						<view class="nowMoney flex-row">
							<view class="coupon-after">券后</view>
							<view>￥</view>
							<view class="money">
								{{shop.price}}
							</view>
						</view>
						<view class="oldMoney flex-row">
							<view>￥</view>
							<view class="money">
								{{shop.originalCost}}
							</view>
						</view>
					</view>
					<!-- <view class="rebate">返利￥6</view> -->
					<!-- <view class="rebate" @click="getShopLink(shop)">立即领取</view> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'shop',
		props: {
			shops: Array,
			systemType: String
		},
		data() {
			return {

			}
		},
		methods: {
			//查看商品详情
			shopDetail: function(index) {
				console.log("商品详情", this.shops[index])
				const shop = this.shops[index];
				const path = `../shopDetail/shopDetail?id=${shop.id}&system=pdd&shopName=${shop.title}`;
				uni.navigateTo({
					url: path
				})
			},
			getShopLink: function(event) {
				console.log("getShopLink")
			},
		}
	}
</script>

<style lang="less" scoped>
	.shops {
		padding: 10px;
		background-color: #f7f7f7;

		.shop:last-child {
			margin-bottom: 0px;
		}

		.shop {
			margin-bottom: 10px;
			background-color: #FFFF;
			padding: 5px;
			border-radius: 5px;

			image {
				border-radius: 5px !important;
			}

			.shop-info {
				margin-left: 5px;

				.shop-title {
					font-weight: bold;
					width: 100%;
				}

				.sales-tip {
					color: #9f9f9f;
					font-size: 10px;
				}

				.coupon {
					color: red;
				}

				.final-price {
					justify-content: space-between;

					.money-info {
						color: #fe4e06;
						align-items: center;
						align-content: center;
						align-self: center;

						.nowMoney {
							.coupon-after {
								font-weight: bold;
							}

							color: #fd4800;
							align-items: center;
							margin-right: 5px;

							.money {
								font-weight: bold;
								font-size: 18px;
							}
						}

						.oldMoney {
							color: #999999;
							align-items: center;

							.money {
								text-decoration: line-through;
							}
						}
					}

					.rebate {
						background-color: #000000;
						text-align: center;
						padding: 5px;
						color: #FFFFFF;
						border-radius: 5px;
					}
				}
			}
		}
	}
</style>
